<template>
	<view class="machine-data">
		<view v-if="deviceList.length">
			<view
				class="machine-data-item flex-center"
				v-for="(item, index) in deviceList"
				@click="action(item)"
				:key="index">
				<image
					class="machine-data-item-img" 
					:src="item.product.image ? item.product.image : defaultImage" 
					mode="aspectFill"
				></image>
				<view class="machine-data-item-right">
					<view class="name text-overflow-one">{{item.product.name || '新一代立升净饮一体机'}}</view>
					<view class="type">序列号:{{item.baseInfo.number}}</view>
					<!-- <view class="price">租赁价格:
						<text class="color-important">¥{{item.product.price}}</text>
					</view> -->
					<view class="daterange" v-if="item.product.use_time">时间:{{item.product.use_time}}</view>
					<!-- <view class="address text-overflow-one">
						地址:{{ item.baseInfo.address.split('-')[2] }}
					</view> -->
				</view>
				<view :class="item.device_status ? 'status status-normal' : 'status status-abnormal'">
				 {{ item.device_status ? '异常' : '正常' }}
				</view>
			</view>
			
		</view>
		<view v-else class="no-data">
			<image class="no-data-img" src="../../static/images/no-data.png" mode="aspectFit"></image>
			无机器数据
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon.vue"
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				defaultImage: '/static/images/equipment.jpg',
				deviceList: [],
			}
		},
		onLoad() {
			this.getDeviceList()
		},
		methods: {
			/**
			 * 获取设备列表数据
			 */
			async getDeviceList() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/equipment/my-equipment',
					data: {}
				})
				if (res.status === 1) {
					this.deviceList = res.data.list.map(item => {
						item.product.image = item.product.image ? this.$baseUrl + item.product.image: item.product.image;
						item.device_status = item.baseInfo.result_device.is_alert;
						return item
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			
			/**
			 * 跳转控制页
			 * @param {Number} id
			 */
			action(item){
				let id = item.product.id;
				let adapter_id = item.baseInfo.adapter_id;
				let number = item.baseInfo.number;
				this.pageTo('control?id=' + id + '&adapter_id=' + adapter_id + '&number=' + number)
			},
			
			/**
			 * 跳转
			 * @param {String} page
			 */
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			}
		}
	}
</script>

<style lang="scss">
	.machine-data{
		padding-top: 20rpx;
		&-item{
			margin-bottom: 20rpx;
			padding: 30rpx 40rpx;
			background: $uni-bg-color;
			position: relative;
			&-img{
				height: 180rpx;
				width: 180rpx;
			}
			&-right{
				width: 450rpx;
				margin-left: 20rpx;
				.name{
					width: 400rpx;
				}
				.type,
				.daterange,
				.price,
				.address{
					width: 450rpx;
					line-height: 1.5;
					font-size: $uni-font-size-sm2;
					color: $uni-text-color-grey;
				}
			}
			.status{
				position: absolute;
				top: 35rpx;
				right: 30rpx;
				height: 40rpx;
				width: 80rpx;
				line-height: 40rpx;
				text-align: center;
				border-radius: $uni-border-radius-sm2;
				color: $uni-text-color-inverse;
				font-size: $uni-font-size-sm1;
			}
			.status-normal{
				background: #ff5858;
			}
			.status-abnormal{
				background: #00c590;
			}
		}
	}
</style>
